<template>
	<view class="canvas" :style="{ width: w + 'px', margin: '0 auto' }">
		<canvas canvas-id="shareCanvas" style="width:600px;height:900px"></canvas>
		<view v-if="isBtn" class="savePhoto " @click="savePhoto" :style="{ width: w + 'px' }">保存到相册</view>
	</view>
</template>

<script>
export default {
	props: {
		isWhiteSpace: {
			//是否留白处理
			type: Boolean,
			default: true
		},
		padding: {
			//四周留白距离
			type: Number,
			default: 65
		},
		borderRadius: {
			//圆角度数 0表示没有 >0表示圆角度数
			type: Number,
			default: 0
		},
		shareImg: {
			//分享图片地址
			type: String,
			default: ''
		},
		shareImgW: {
			//分享图片宽
			type: Number,
			default: 370
		},
		shareImgH: {
			//分享图片高
			type: Number,
			default: 410
		},
		imgScan: {
			//生成卡片右下角二维码
			type: String,
			default: '../../static/img/64.png'
		},
		imgScanW: {
			//二维码大小
			type: Number,
			default: 140
		},
		imgType: {
			//图片保存格式
			type: String,
			default: 'png' //仅支持png/jpg
		},
		title: {
			type: String,
			default: '源未文化'
		},
		author: {
			type: String,
			default: '源未'
		},
		bottomH: {
			type: Number, //底部文字区域总高度
			default: 220
		},
		bottomPadding: {
			//底部内容区域四周留白 准确来说是上和左，底部留白是由bottomH决定
			type: Array,
			default: [40, 20]
		},
		bottomType: {
			//底部作者区域显示类型 0 作者|名字 1 ·作者
			type: Number,
			default: 0
		}
	},

	data() {
		return {
			isShow: false,
			isScreen: false,
			srcImg: '',
			w: '',
			h: '',
			isBtn: false
		};
	},
	onLoad() {
		this.showScreen();
	},
	methods: {
		showScreen() {
			let wxGetImageInfo = promisify(uni.getImageInfo());
			wxGetImageInfo({
				src: 'https://zhanbu.nomeis.cn/upload/page_resource/kapai_face.png',
				success:(res)=>{
					console.log(res)
					const ctx = wx.createCanvasContext('shareCanvas');
					ctx.drawImage(res.path, 0, 0, 600, 900);
					
					// 作者名称
					ctx.setTextAlign('center'); // 文字居中
					ctx.setFillStyle('#000000'); // 文字颜色：黑色
					ctx.setFontSize(22); // 文字字号：22px
					ctx.fillText('作者：一斤代码', 600 / 2, 500);
					
					ctx.stroke();
					ctx.draw();
				}
			})
		}
	}
};
</script>

<style lang="less" scoped="">
.canvas {
	.savePhoto {
		margin-top: 20upx;
		height: 90upx;
		line-height: 90upx;
		color: #000;
		background: #fff;
		font-weight: bold;
		font-size: 36upx;
		border-radius: 20upx;
		text-align: center;
	}
}
</style>
